<template>
	<view class='mainbody' v-if="!showDetail">
		<view class="content">
			<view class="item-container">
				<view class="lineItem">
					<view class="leftStl">伙食费补助</view>
					<view class="rightStl">{{item.alwMeal}}元</view>
				</view>
				<view class="lineItem">
					<view class="leftStl">市内交通费补助</view>
					<view class="rightStl">{{item.alwTraffic}}元</view>
				</view>
				<view class="lineItem">
					<view class="leftStl">总补助金额</view>
					<view class="rightStl">{{item.alwAmt}}元</view>
				</view>
				<view class="imgItem">
					<image v-for="(ite,i) in item.imgs" :src="ite.src" :key="i" mode="aspectFit" class="picAlw"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { alwDetailData,getAlwImgs } from "@/api/reimburseApply.js"
	export default {
		data(){
			return{
				item:{},
				alwId:'',
				showDetail:false
			}
		},
		onLoad(option) {
			let item = JSON.parse(decodeURIComponent(option.item))
			this.alwId = item.alwId
			this.getDetailAlw()
		},
		methods:{
			getDetailAlw(){
				this.showDetail = true
				uni.showLoading({
					title:'数据正在努力的加载中...'
				})
				alwDetailData({alwId:this.alwId}).then(res=>{
					this.item = res[1].data
					this.item.imgs = []
					if(this.item.ufileId){
						if(this.item.ufileId.includes(',')){
							let ufileIdArr = this.item.ufileId.split(',')
							ufileIdArr.map((ite,ind)=>{
								getAlwImgs({ufileId:ite}).then(res=>{
									this.item.imgs.push({
										src:res[1].data[0]
									})
								})
							})
						} else {
							getAlwImgs({ufileId:this.item.ufileId}).then(res=>{
								this.item.imgs.push({
									src:res[1].data[0]
								})
							})
						}
					}
					this.showDetail = false
					setTimeout(()=>{
						uni.hideLoading()
					},500)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mainBody {
		background: #f7f7f7;
		min-height: 100%;
		color: #333333;
	}
	
	.content {
		min-height: 100%;
		padding-top: 20rpx;
	}
	.item-container {
		top: 20rpx;
		height: 352rpx;
		background-color: #fff;
	
		.lineItem {
			display: flex;
			justify-content: space-between;
			padding: 0 32rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
			line-height: 64rpx;
		}
	
		.lineItem:nth-child(1) {
			padding-top: 16rpx;
		}
		
		.imgItem{
			display: flex;
			flex-direction: row;
			.picAlw{
				width: 180rpx;
				height: 180rpx;
				border-radius: 14rpx;
				margin-right: 32rpx;
			}
		}
	}
</style>